<template>
	<view class="recommend u-flex-col u-flex-end" :style="{backgroundImage:`url(${background})`}" v-if="list.length > 0"
		@click="$navigateTo('/subPackages/search/list')">
		<view class="recommend-content">
			<view class="li" v-for="(v,k) in list" :key="k" @click.stop="recommendClick(v)">
				<view class="source" v-if="v.source_type == 2">跨境</view>
				<u-image :src="v.cover_image || ''" width="220rpx" height="220rpx" radius="8rpx"></u-image>
				<view class="li-content">
					<view class="li-name">{{v.name}}</view>
					<view class="li-footer u-flex-between">
						<view class="footer-left u-flex u-col-end">
							<view class="li-price u-flex u-col-end">
								<text style="font-size: 22rpx;">￥</text>
								<text style="font-size: 26rpx;">{{v.minPriceSpec.price}}</text>
							</view>
							<view class="original-price u-flex u-col-end">
								<text style="font-size: 20rpx;">￥</text>
								<text style="font-size: 20rpx;">{{v.minPriceSpec.original_price}}</text>
							</view>
						</view>
						<view class="footer-right">
							<image v-if="v.source_type == 1" :src="$getImageUrl('/user_client/static/icons/add-shopcart.png')"
								class="add-shopcart-icon"
								@click.stop="v.minPriceSpec.stock > 0?addShop(v):$showToast('抱歉，当前商品补货中')">
							</image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		props: {
			list: {
				type: Array,
				default: (() => {
					return [];
				})
			},
			background: {
				type: String,
				default: ''
			},
		},
		methods: {
			// 添加购物车
			addShop(e) {
				if (!this.$isLogin()) {
					this.$navigateTo()
					return;
				}
				if (this.isShopCart == false) return;
				this.isShopCart = false;
				this.$post("shopCart/addReduce", {
					product_type: 1,
					type: 1,
					product_id: e.id,
					product_spec_id: e.minPriceSpec.id,
					number: 1,
				}).then(res => {
					this.isShopCart = true;
					if (res.code == 200) {
						this.$showToast(res.msg)
						// 更新购物车总数
						this.$store.commit('shopCart/setShopCartNumber', res.data.total);
						// 更新已购物车
						this.$store.commit('shopCart/setIsUpdate');
					} else {
						this.$showToast(res.msg)
					}
				}).catch(ex => {
					this.isShopCart = true;
					this.$errorToast()
				});
			},
			recommendClick(item) {
				if (item.source_type == 2) {
					const id = item.yueyang_product_id
				} else {
					if (this.type == 1) {
						this.$emit('recommendClick', item.id)
					} else {
						this.$navigateTo('/subPackages/product/product-detail?product_id=' + item.id)
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.recommend {
		padding: 40rpx 8rpx 20rpx;
		box-sizing: border-box;
		margin-top: 22rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 890rpx;
		width: 694rpx;

		.recommend-content {
			display: grid;
			grid-column-gap: 10rpx;
			grid-template-columns: 1fr 1fr 1fr;
			grid-row-gap: 8rpx;

			.li {
				background-color: #FFFFFF;
				padding-bottom: 30rpx;
				position: relative;

				.source {
					line-height: 1;
					font-size: 20rpx;
					color: #FFFFFF;
					padding: 8rpx 12rpx;
					box-sizing: border-box;
					background-color: #131313;
					border-radius: 1rpx;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 9;
				}

				.li-content {
					padding: 0 10rpx;
					box-sizing: border-box;

					.li-name {
						line-height: 1;
						padding-top: 20rpx;
						font-size: 20rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
					}

					.li-footer {
						padding-top: 24rpx;
						line-height: 1;

						.footer-left {
							.li-price {
								color: $base-price-color;
							}

							.original-price {
								padding-left: 10rpx;
								color: #A7A7A7;
								text-decoration: line-through;
							}
						}

						.footer-right {

							.add-shopcart-icon {
								width: 30rpx;
								height: 30rpx;
							}
						}
					}
				}
			}
		}
	}
</style>